<!--
 * @Author: hongzhew
 * @Date: 2022-04-07 17:43:02
 * @LastEditors: mengjuhua
 * @LastEditTime: 2022-12-01 10:51:38
 * @Description: 
-->
<!--  -->
<template>
    <div>
        <el-descriptions class="margin-top" :column="settingStore.device === 'mobile' ? 1 : 2" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('名称') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.name }}</span>
                <el-input v-else v-model="basicInfo.name" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('唯一标识') }} </div>
                </template>
                <span>{{ basicInfo.id }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('租户唯一标识') }} </div>
                </template>
                <span>{{ basicInfo.tenantId }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('自定义ID') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.customId }}</span>
                <el-input v-else v-model="basicInfo.customId" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('系统标识') }} </div>
                </template>
                <span v-if="basicInfo.resourceType != 0">{{ basicInfo.systemName }}</span>
                <span v-else>{{ basicInfo.systemId }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('系统中文名称') }} </div>
                </template>
                <span>{{ basicInfo.systemCnName }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('扩展属性') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.properties }}</span>
                <el-input type="textarea" :rows="3" v-else v-model="basicInfo.properties" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item"> {{ $t('类型') }} </div>
                </template>
                <span v-if="basicInfo.resourceType != 0">{{ basicInfo.type == 'role' ? $t('角色') : $t('节点') }}</span>
                <span v-else>{{ $t('应用') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :span="3">
                <template #label>
                    <div class="cell-item"> {{ $t('描述') }} </div>
                </template>
                <span v-if="editFlag">{{ basicInfo.description }}</span>
                <el-input type="textarea" :rows="3" v-else v-model="basicInfo.description" />
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script lang="ts" setup>
    import { getRoleInfo } from '@/api/role/index';
    import { resourceInfo } from '@/api/resource/index';
    import { useSettingStore } from '@/store/modules/settingStore';
    const settingStore = useSettingStore();

    const props = defineProps({
        id: String, // 系统id
        type: Number, // 资源类型
        editFlag: Boolean, // 编辑 与 查看 的对应显示变量
        saveClickFlag: Boolean, // 是否点击保存 的变量
    });
    const emits = defineEmits(['getInfoData']);

    // 基本信息
    let basicInfo = ref({});

    // 请求详情 函数
    async function getInfo() {
        // 请求接口 并赋予值
        let result;
        if (props.type === 0) {
            result = await resourceInfo(props.id);
        } else {
            result = await getRoleInfo(props.id);
        }
        basicInfo.value = result.data;
    }

    onMounted(() => {
        getInfo();
    });
    // 监听系统id 当发生改变时重新请求数据
    watch(
        () => props.id,
        async (new_, old_) => {
            if (new_ && new_ !== old_) {
                getInfo();
            }
        }
    );

    // 监听 saveClicFlag 当为true 时 将对象传给 index
    watch(
        () => props.saveClickFlag,
        async (new_, old_) => {
            if (new_) {
                emits('getInfoData', basicInfo.value);
            }
        }
    );
</script>
<style scoped lang="scss"></style>
